<template>
	<view>
		<!-- 支付表单 -->
		<view style="padding: 20rpx;background-color: white;">
			<u-form :model="form" ref="uForm" label-width="200">
				<u-form-item label="支付方式" prop="pay_type">
					<u-select v-model="showSelectChannel" @confirm="confirm" :list="[
																	{id:1,label:'支付宝芝麻信用预授权',value:1},
																	{id:2,label:'信用卡预授权',value:2}
																]"></u-select>
					<u-input v-model="form.pay_type" :disabled="true" type="select" @click="showSelectChannel=true" />
				</u-form-item>
				<u-form-item label="退还期限" prop="deposit_back_term">
					<u-input v-model="form.deposit_back_term" type="number" />
				</u-form-item>
				<u-form-item label="缴纳金额" prop="deposit_pay_amont">
					<u-input v-model="form.deposit_pay_amont" />
				</u-form-item>
				<u-form-item label="支付凭证" v-if="form.deposit_pay_type!=1">
					<u-upload ref="uUpload" :auto-upload="false" :show-progress="true"
						:form-data="{path:'/static/img/back_amount/'}" :multiple="true">
					</u-upload>
				</u-form-item>
				<view style="width: 100%;">
					<u-button @click="submit" type="primary">添加押金</u-button>
				</view>
			</u-form>
		</view>
		<u-toast ref="uToast"></u-toast>
		<!-- <u-avatar src="http://tmp/ExThmpgDoq9dd60ec45b54a0ac551cea6964878ba556.jpg"></u-avatar> -->
	</view>
</template>

<script>
	import {
		data
	} from 'uview-ui/libs/mixin/mixin';
	import cos from '../../utils/cos';
	// const COS = require('cos-js-sdk-v5');
	export default {
		data() {
			return {
				showSelectChannel: false,
				uploadList: [],
				host: '',
				data: {},
				form: {
					pay_type: '',
					deposit_pay_type: '',
					deposit_pay_amont: '',
					deposit_pay_img: ''

				},
				rules: {
					pay_type: [{
						required: true,
						message: '请选择支付方式',
						trigger: ['blur', 'change']
					}],
					deposit_pay_type: [{
						required: true,
						message: '请选择支付方式',
						trigger: ['blur', 'change']
					}],
					deposit_pay_amont: [{
						required: true,
						message: '请输入支付金额',
						trigger: ['blur', 'change']
					}],
					deposit_pay_img: [{
						required: true,
						message: '请上传图片',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		onLoad(options) {
			this.data = JSON.parse(decodeURIComponent(options.data));
			this.form.item_single_price = this.data.expense_amount;
			this.host = this.$http.host;
		},
		mounted() {

		},
		methods: {
			confirm(e) {
				console.log(e[0]);
				this.form.deposit_pay_type = e[0].value;
				this.form.pay_type = e[0].label;
			},
			submit() {
				var that = this;
				var list = this.$refs.uUpload.lists;

				console.log(list.length);
				var dir = '/static/img/deposit_pay_img/';
				var form = JSON.parse(JSON.stringify(this.form));
				if (form.deposit_pay_type!=1&&list.length==0) {
					that.$refs.uToast.show({
						title: '请上传凭证',
						type: "warning"
					});
					return;
				}
				this.$refs.uForm.validate(valid => {
					console.log(valid);
					if (valid) {
						if (list.length > 0) {
							cos.uploadFiles(list, dir, (data) => {
								console.log(data);
								var record_img = data.files.map(item => item.options.Key);
								form.deposit_pay_img = record_img.toString();
								form.order_id = that.data.orders_id;
								var url = form.deposit_pay_type == 1 ? '/orders/addAlipayDeposit' :
									'/orders/payDeposit'
								that.$http.post(url, form, (res) => {
									if (res.data.success) {
										console.log(that.$refs.uToast);
										that.$refs.uToast.show({
											title: '添加押金成功',
											type: "success"
										});
										uni.$emit("getOrdersInfo", that.data);
										uni.navigateBack();
									} else {
										that.$refs.myModal.show('登录失败', res.data.result.message);
									}
								});
							});
						} else {
							form.order_id = that.data.orders_id;
							var url = form.deposit_pay_type == 1 ? '/orders/addAlipayDeposit' :
								'/orders/payDeposit'
							that.$http.post(url, form, (res) => {
								if (res.data.success) {
									console.log(that.$refs.uToast);
									that.$refs.uToast.show({
										title: '添加押金成功',
										type: "success"
									});
									uni.$emit("getOrdersInfo", that.data);
									uni.navigateBack();
								} else {
									that.$refs.myModal.show('登录失败', res.data.result.message);
								}
							});
						}

					} else {
						console.log('验证失败');
					}
				});
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>

</style>